<template>
  <div>
    <div style="width:100%">
      <el-form
        v-if="tableData&&tableData.length>0"
        label-width="auto"
      >
        <el-form-item label="标记百分比">
          <el-slider
            v-model="markerPercentage"
            :step="10"
            show-input
          >
          </el-slider>
        </el-form-item>
      </el-form>
      <el-alert
        v-if="tableData&&tableData.length>0"
        type="info"
        :closable="false"
      >
        <span>查找到<b>{{tableData.length}}</b>人的</span>
        <span><b>{{statisticTrainee.countRecordTotal}}</b>条记录，</span>
        <span>涉及<b>{{statisticTrainee.exerciseList.length}}</b>个练习，</span>
        <span>共计<b>{{statisticTrainee.scoreAverageList.length}}</b>个分数排名，</span>
        <span>后<b>{{markerPercentage}}</b>%</span>
        <span>不多于<b>{{Math.round(statisticTrainee.scoreAverageList.length*markerPercentage/100)}}</b>名。</span>
      </el-alert>
      <el-divider></el-divider>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="table"
    >
      <el-table-column
        prop="trainee.traineeName"
        label="姓名"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="statistic.countRecord"
        label="总次数"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="statistic.countFailedRecord"
        label="未通过"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="statistic.countFailedSubjects"
        label="需加练"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="statistic.scoreAverage"
        label="平均分"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="statistic.scoreMin"
        label="最低分"
        min-width="90"
        sortable
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="排名"
        min-width="90"
        align="center"
      >
        <template slot-scope="scope">
          <span>第{{calcRanking(scope.row)}}名</span>
        </template>
      </el-table-column>
      <el-table-column
        label="排名百分比"
        min-width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-progress
            :text-inside="true"
            :stroke-width="24"
            :status="calcPercentage(scope.row)>markerPercentage?null:'exception'"
            :percentage="calcPercentage(scope.row)"
          ></el-progress>
        </template>
      </el-table-column>
      <el-table-column
        min-width="90"
        label="详情"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleShowDetail(scope.row)"
            icon="el-icon-folder-opened"
          >查看</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  export default {
    name: 'tablePanel',
    computed: {
      statisticTrainee() {
        return this.$store.state.statisticTrainee;
      },
      tableData() {
        if (!this.statisticTrainee.content) return [];
        return this.statisticTrainee.content;
      },
    },
    data() {
      return {
        markerPercentage: 10,
      }
    },
    methods: {
      calcPercentage(row) {
        // console.log(row);
        let scoreList = this.statisticTrainee.scoreAverageList;
        let score = row.statistic.scoreAverage;
        let index = scoreList.indexOf(score) + 1;
        let percentageRaw = (index / scoreList.length) * 100;
        let percentage = Math.round(percentageRaw, 0);
        return percentage;
      },
      calcRanking(row) {
        // console.log(row);
        let scoreList = this.statisticTrainee.scoreAverageList;
        let score = row.statistic.scoreAverage;
        let ranking = scoreList.length - scoreList.indexOf(score);
        return ranking;
      },
      handleShowDetail(row) {
        this.$emit('showDetail', row);
        // console.log(row);
      },
    },
    mounted() {
      this.$refs.table.sort('statistic.scoreAverage', 'asc');
      // console.log(this.$refs.table);
    },
  }
</script>

<style>

</style>